﻿@page "/gantt-chart/column-resizing"
@using Syncfusion.Blazor.Gantt
@using ej2_blazor_defaultdata
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the Gantt column resizing feature. Click and drag at the right corner of each column header to resize the column.</p>
</SampleDescription>
<ActionDescription>
    <p>The Gantt columns can be resized by clicking and dragging at the right corner of the column’s header. Set the <code>AllowResizing</code> property to true to enable column resizing behavior in Gantt. You can also prevent the resize of a particular column by setting <code>GanttColumn -> AllowResizing</code> to false in columns definition.</p>
    <p>More information on the Column Resizing can be found in this <code><a target='_blank' class='code' href='https://blazor.syncfusion.com/documentation/gantt-chart/columns/#resizing'>documentation</a></code> section.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGantt DataSource="@TaskCollection" Height="450px" Width="100%" AllowResizing="true" HighlightWeekends="true" 
                    ProjectStartDate="@ProjectStart" ProjectEndDate="@ProjectEnd">
                <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate"
                                 Duration="Duration" Progress="Progress" ParentID="ParentId" Dependency="Predecessor">
                </GanttTaskFields>
                <GanttLabelSettings LeftLabel="TaskName" TValue="DefaultData.TaskData"></GanttLabelSettings>
                <GanttSplitterSettings Position="50%"></GanttSplitterSettings>
            </SfGantt>
        </div>
    </div>
</div>

@code{ 
    public DateTime ProjectStart = new DateTime(2019, 3, 24);
    public DateTime ProjectEnd = new DateTime(2019, 7, 6);
    public List<DefaultData.TaskData> TaskCollection { get; set; }

    protected override void OnInitialized()
    {
        this.TaskCollection = DefaultData.ProjectNewData();
    } 
}
